<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>修改密码</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script> 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
	<link href="css/mui.picker.css" rel="stylesheet" />
<script type="text/javascript">
	$(window).load(function(){
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)
	})
</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
			<a class="btn" href="center.html">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
	                      返回
	        </div>
	    </header>
	    <!--header end-->
	    
	    <div class="warp warpthree clearfloat">
	    	<div class="h-top h-toptwo clearfloat box-s">
	    		<p class="tu"><img src="img/touxiang.png"/></p>
	    		<p class="nr" id='username'><span>普通会员</span></p>
	    	</div>
			<form>
	    	<div class="apply recharge clearfloat">
	    		<div class="appxiugai clearfloat">
	    			<ul>
						<li class="ra3 fl">
							<i class="iconfont icon-mima fl"></i>
							<input type="password" name="oldPwd" id="oldPwd" value="" placeholder="确认输入原始密码" />
							
						</li>
	    				<li class="ra3 fl">
	    					<i class="iconfont icon-mima fl"></i>
	    					<input type="password" name="newPwd" id="newPwd" value="" placeholder="请输入新密码" />
							
	    				</li>
						<li class="ra3 fl">
							<i class="iconfont icon-mima fl"></i>
							<input type="password" name="rePwd" id="rePwd" value="" placeholder="请确认新密码" />
							
						</li>

	    			</ul>
	    		</div> 
	    		<div class="xia clearfloat">
	    			<a href="javascript:void(0)" class="db fl btn ra3" id="btnSubmit">确定</a>
	    			<a href="center.html" class="db fr btn ra3">取消</a>
	    		</div>
	    	</div>    	
			</form>
	    </div>
	    
	    <!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>商城</p>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="iconfont icon-erweima1"></i>
						<p>二维码</p>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="iconfont icon-kefu1"></i>
						<p>客服</p>
					</a>
				</li>
				<li class="active">
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
			<script type="text/javascript" src="js/validate.js"></script>
				<script type="text/javascript">
					var changePasswordUrl=baseUrl+ "/zuul-user/users/changePassword"
		
					$(function(){ // 页面就绪事件
					
					$("#username").html(localStorage.getItem('username'));
						// 为提交按钮添加点击事件
						$("#btnSubmit").click(function(){
							// 获取表单数据
							var oldPwd=$("#oldPwd").val();
							var newPwd=$("#newPwd").val();
							var rePwd=$("#rePwd").val();
		
							// var divArr=$("div.has-success");
							// if(divArr.length!=3){ // 存在异常项
							// 	return;
							// }
		
							// 两次密码一致
							var flag=checkRePwd("newPwd","rePwd","两次密码应该一致");
							
							flag=checkNotSame("newPwd","oldPwd","新密码不能与旧密码一致")&&flag;
		
							// 有验证异常则不提交表单
							if(flag==false){
								return;
							}
		
							// 提交表单
							var params={
								oldPassword:oldPwd,
								newPassword:newPwd,
								uid:localStorage.getItem('uid')
							}
							
							// 发送AJAX请求
							$.post(changePasswordUrl,params,function(result){
							
								// 处理响应数据
								if(result.state==1000){ // 正常响应
									alert("密码修改成功");
									// 清空表单数据
									$("#oldPwd").val("");
									$("#newPwd").val("");
									$("#rePwd").val("");
								}else{ // 异常响应
									alert(result.msg);
								}
							});
						});
						// 为密码输入框添加失去焦点事件
						$("#oldPwd").blur(function(){
							checkEmpty("oldPwd","原始密码不能为空");
						});
						// 为密码输入框添加失去焦点事件
						$("#newPwd").blur(function(){
							checkEmpty("newPwd","新密码不能为空");
						});
		
						// 为用户名输入框添加失去焦点事件
						$("#rePwd").blur(function(){
							var notEmpty=checkEmpty("rePwd","确认密码不能为空");
							if(notEmpty){
								checkRePwd("newPwd","rePwd","两次密码不一致");
							}
						});
		
					});
				</script>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.min.js"></script>
	<!-- <script src="js/others.js"></script> -->
	<script type="text/javascript" src="js/hmt.js" ></script>
	<script src="slick/slick.js" type="text/javascript" ></script>
	<!--插件-->
	<link rel="stylesheet" href="css/swiper.min.css">
	<script src="js/swiper.jquery.min.js"></script>
</html>
